
<div id="editcancellationpolicy">

    <legend>
        Edit Cancellation Policy
    </legend>

    <form id="add-cancellation-policy" method="get" action="AddCancellationPolicyServlet">
        <input type="hidden" name="policy-id" id="policy-id" value=""/>
        <p class="input-prepend input-append">
            <label for="percentage">Percentage to be deducted</label>
            <span class="add-on"> % </span><input type="number" required name="percentage" id="percentage" class="input-small" placeholder="Percentage">
        </p>
        <br>

        <p class="input-prepend input-append">
            <label for="days">No. of Days</label>
            <span class="add-on">Days </span><input type="number" required name="days" id="days" class="input-small" placeholder="No. of days">
        </p>
        <br>
        
        <p class="input-prepend input-append">
            <label for="days">Policy effective from</label>
            <span class="add-on">Date</span><input type="text" required name="effective-date" id="effective-date" class="input-small" placeholder="No. of days">
        </p>
        
        <!--<p>
            <label for="effective-date" >Policy Effective From</label>
            <input type="date" name="effective-date" id="effective-date" required class="input-medium" placeholder="Effective Date">
        </p>-->
        


        <p>
            <input type="button" id="editpolicysavebutton" class="btn btn-primary btn-large" value="Save" name="submit">
        </p>
        <p>
            <label class="text-success"> Display the "succesfully saved" message here on successfull submission</label>
        </p>

    </form>

</div>

<hr>

<footer>
    <p>&copy; The Prime Resort, 2012</p>
</footer>

</div> <!-- /container -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>

<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js"></script><!-- including jquery UI Datepicker js-->
<script type="text/javascript">
        
    $(document).ready(function() { 
			 	 
        // form validation
        $("#add-cancellation-policy").validate();
				 
        $( "#effective-date" ).datepicker({ //call the datepicker on date input
                
            dateFormat: "yy-mm-dd",
            changeMonth: true,
            changeYear: true,
            yearRange:"+0:+1",
            minDate: new Date(),
        });
				 
    });
			
        
</script>
<script src="js/main.js"></script>